<template>
    <el-container class="home-container">
      <!-- 头部区域 -->
      <el-header>
        <div>
          <img src="../assets/imges/logo.jpg" alt="">
          <span>电商后台管理系统</span>
        </div>
        <el-button type="info" @click="logout">退出登录</el-button>
      </el-header>
      <!-- 内容区域 -->
      <el-container>

        <!-- 侧边栏 -->
        <el-aside :width="isCollapse ? '64px' :'200px' ">
          <!-- 伸缩菜单栏功能 -->
              <div class="toggle-button" @click="toggleCollapse">
                |||
              </div>
              <el-menu
                background-color="#333744"
                text-color="#fff"
                active-text-color="#409eff" unique-opened :collapse="isCollapse"
                :collapse-transition="false" router>
                <!-- 一级菜单 -->
                <el-submenu :index="item.id + '' " v-for="item in menulist" :key="item.id">
                  <!-- 一级菜单模板区域 -->
                  <template slot="title">
                    <!-- 图标 -->
                    <i :class="iconsObj[item.id]"></i>
                    <!-- 文本 -->
                    <span>{{item.authName}}</span>
                  </template>
                  <!-- 二级菜单 -->
                  <el-menu-item v-for="subitem in item.children" :key="subitem.id" :index=" '/' + subitem.path + '' ">
                    <i class="el-icon-menu"></i>
                    <!-- 文本 -->
                    <span>{{subitem.authName}}</span>
                  </el-menu-item>
                </el-submenu>
              </el-menu>
        </el-aside>
        <!-- 右侧内容主题 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
</template>

<script>
  export default {
    created() {
      // 发送请求，请求左侧菜单栏数据
      this.getMenusList()
    },
    data() {
      return {
        // 左侧菜单数据
        menulist:[],
        // 图标集合
        iconsObj:{
          '125': 'iconfont icon-users',
          '103': 'iconfont icon-tijikongjian',
          '101': 'iconfont icon-shangpin',
          '102': 'iconfont icon-danju',
          '145': 'iconfont icon-baobiao'
        },
        // 菜单栏是否折叠属性
        isCollapse: false
      }
    },
     methods:{
       logout: function(){
          // 清除了tonken
         window.sessionStorage.clear();
         this.$router.push('/login');
       },
        // 获取所有的菜单
       getMenusList: async function(){
         const {data: res} = await this.$http.get('menus');
         if(res.meta.status !== 200){
           return this.$message.error(res.meta.msg);
         }else{
           this.menulist = res.data;
           // console.log(this.menulist)
         }
        },
        // 伸缩导航栏
        toggleCollapse: function(){
            this.isCollapse = !this.isCollapse;
        }
      }
  }
</script>

<style lang="less" scoped>
    .home-container{
       height: 100%;
     }
    .el-header {
      background-color: #373d41;
      display: flex;
      justify-content: space-between;
      padding-left: 0;
      align-items: center;
      color: #fff;
      font-size: 20px;
      div {
        display: flex;
        align-items: center;
        span{
          margin-top: 15px ;
          margin-left: 7px;
        }
        img{
          width: 45px;
          height: 45px;
          border-radius: 20px;
        }
      }
    }
    .el-submenu span{
      margin-left: 10px;
    }
    .el-menu-item span{
      margin-left: 0px;
    }
    .el-aside {
      background-color: #333744;
      .el-menu {
        border-right: none;
      }
    }
    .el-main {
      background-color: #eaedf1;
    }
    .toggle-button {
      background-color: #4a5064;
      line-height: 24px;
      font-size: 10px;
      color: #fff;
      text-align: center;
      letter-spacing: 0.2em;
    }
</style>
